<template>
	<!-- 导航 -->
	<div id="nav_contents">
		<div class="navBox">
			<div class="navTitle">
				<span v-for="(item, index) in list" :class="navHoverIndex == index ? 'navName navHoverName' : 'navName'" @mouseenter="hoverNav(index)">{{ item.channelName }}</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: ['sss'],
	emit: ['changeChannel'],
	data() {
		return {
			msg: '我是unit04组件',
			list: [],
			navHoverIndex: 0,
			contentList: [] //栏目对应内容数据
		};
	},
	created() {
		this.getHeaderList();
	},
	methods: {
		hoverNav(index) {
			this.navHoverIndex = index;
			this.$emit('changeChannel', this.list[this.navHoverIndex].channelPath);
		},
		getHeaderList() {
			// 栏目导航只取4个
			let query = GetQueryString();
			let param = {
				parentId: query.id,
				count: 10
			};
			homeApi.HeaderChannellist(param, res => {
				if (res.code == '00000 00000') {
					this.list = res.data;
					this.list.forEach(item => {
						item.href = this.path + item.channelPath + '?id=' + item.id;
					});
					this.$emit('changeChannel', this.list[this.navHoverIndex].channelPath);
				} else {
				}
			});
		}
	}
};
</script>

<style>
#nav_contents {
	width: 840px;
	padding: 18px 0 24px;
	background: #ffffff;
	border-top: 1px solid #f0f0f0;
	height: fit-content;
	opacity: 1;
}
#nav_contents .navBox {
	width: 840px;
	display: flex;
	align-items: center;
}
#nav_contents .navBox .website {
	margin-right: 8px;
	display: flex;
	align-items: center;
}
#nav_contents .navBox .website .logo {
	font-size: 28px;
	font-weight: 600;
	color: #ff3333;
}
#nav_contents .navBox .website .name {
	margin-left: 4px;
	height: 24px;
	font-size: 24px;
	font-weight: 600;
	color: #333333;
	line-height: 24px;
}
#nav_contents .navBox .navTitle .navName {
	margin-right: 48px;
	font-size: 18px;
	color: #666;
	line-height: 20px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 400;
	cursor: pointer;
  margin-left: 0px;
}
#nav_contents .navBox .navTitle .navHoverName {
	color: #333;
	line-height: 20px;
	position: relative;

	font-weight: 500;
}
#nav_contents .navBox .navTitle .navHoverName:after {
	position: absolute;
	content: '';
	height: 3px;
	background: #ff3333;
	width: 100%;
	left: 0px;
	top: -16px;
}
</style>
